<template>
  <div class="app-container" style="height: calc(100vh - 90px)">
    <!-- 按钮组 -->
    <el-row :gutter="20" class="row-line">
      <el-col :span="6" class="flex align-center">
        <el-input v-model="barcode" clearable placeholder="请输入条码进行查找" @change="GetDyeMainMaterial" />
      </el-col>
      <el-col :span="18" class="flex align-center">
        <el-button type="primary" icon="el-icon-search" @click="GetDyeMainMaterial">查询</el-button>
        <el-button v-if="headerStatus == 'finish'" type="primary" icon="el-icon-edit" @click="changeHeaderStatus">修改表头</el-button>
        <el-button v-else type="primary" icon="el-icon-check" @click="changeHeaderStatus">保存表头</el-button>
      </el-col>
    </el-row>

    <!-- 表头部分 -->
    <div class="table-header">
      <!-- 缸号，布种，客户，色号 -->
      <el-row :gutter="40" class="row-line">
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">缸号：</span>
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">布种：</span>
          {{ header.productname }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">客户：</span>
          {{ header.customname }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">色号：</span>
          {{ header.colnum }}
        </el-col>
      </el-row>
      <!-- 花宽，花高，重量，用水总量 -->
      <el-row :gutter="40" class="row-line">
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">花宽：</span>
          {{ header.clacew }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">花高：</span>
          {{ header.claceh }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">重量：</span>
          {{ header.nquantity }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">水量：</span>
          <span v-if="headerStatus == 'edit'">
            <el-input type="number" v-model="header.quantity_waster" placeholder="请输入内容" @input="changeWaterQty" />
          </span>
          <span v-else>{{ header.quantity_waster }}</span>
        </el-col>
      </el-row>
      <!-- 合计，备注 -->
      <el-row :gutter="40" class="row-line">
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">工价：</span>
          {{ header.productname }}
        </el-col>
        <el-col :span="6" class="flex align-center">
          <span style="width: 60px">成本：</span>
          {{ header.productname }}
        </el-col>
        <el-col :span="12" style="display: flex">
          <span style="width: 60px">备注：</span>
          <span v-if="headerStatus == 'edit'"><el-input v-model="header.cnote" placeholder="请输入内容" /></span>
          <span v-else>{{ header.cnote }}</span>
        </el-col>
      </el-row>
    </div>

    <!-- 明细按钮组 -->
    <div style="margin-bottom: 10px">
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="showAddItem('前处理')"> 前处理 </el-button>
      <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-plus" @click="showAddItem('染色')"> 染色 </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="showAddItem('后处理')"> 后处理 </el-button>
    </div>

    <el-scrollbar style="height: 75%">
      <!-- 前处理 -->
      <el-table :data="beforeData" :header-cell-style="{ background: '#f1f1f1', textAlign: 'center' }" border style="width: 100%">
        <!-- 材料名,单用量,成品用量,实际用量,单位,属性,备注,操作 -->
        <el-table-column label="前处理材料" min-width="150px">
          <template slot-scope="{ row }">{{ row.cproductname }}</template>
        </el-table-column>
        <el-table-column label="单用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num_standard }}</template>
        </el-table-column>
        <el-table-column label="成品用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="实际用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="单位" min-width="100px">
          <template slot-scope="{ row }">{{ row.nunit }}</template>
        </el-table-column>
        <el-table-column label="属性" min-width="300px">
          <template slot-scope="{ row }">{{ row.props }}</template>
        </el-table-column>
        <el-table-column label="备注" min-width="300px">
          <template slot-scope="{ row }">{{ row.cnote }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="400">
          <template slot-scope="{ row }">
            <el-button type="success" icon="el-icon-edit" @click="editRow(row, '前处理')">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delItem(row, '前处理')">删除</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="appendItem(row, '前处理')">追加</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 染色 -->
      <el-table :data="otherData" :header-cell-style="{ background: '#f1f1f1', textAlign: 'center' }" border style="width: 100%; margin-top: 10px">
        <el-table-column label="染色材料" min-width="150px">
          <template slot-scope="{ row }">{{ row.cproductname }}</template>
        </el-table-column>
        <el-table-column label="单用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num_standard }}</template>
        </el-table-column>
        <el-table-column label="成品用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="实际用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="单位" min-width="100px">
          <template slot-scope="{ row }">{{ row.nunit }}</template>
        </el-table-column>
        <el-table-column label="属性" min-width="300px">
          <template slot-scope="{ row }">{{ row.props }}</template>
        </el-table-column>
        <el-table-column label="备注" min-width="300px">
          <template slot-scope="{ row }">{{ row.cnote }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="400">
          <template slot-scope="{ row }">
            <el-button type="success" icon="el-icon-edit" @click="editRow(row, '染色')">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delItem(row, '染色')">删除</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="appendItem(row, '染色')">追加</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 后处理 -->
      <el-table :data="afterData" :header-cell-style="{ background: '#f1f1f1', textAlign: 'center' }" border style="width: 100%; margin-top: 10px">
        <el-table-column label="后处理材料" min-width="150px">
          <template slot-scope="{ row }">{{ row.cproductname }}</template>
        </el-table-column>
        <el-table-column label="单用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num_standard }}</template>
        </el-table-column>
        <el-table-column label="成品用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="实际用量" min-width="100px">
          <template slot-scope="{ row }">{{ row.num }}</template>
        </el-table-column>
        <el-table-column label="单位" min-width="100px">
          <template slot-scope="{ row }">{{ row.nunit }}</template>
        </el-table-column>
        <el-table-column label="属性" min-width="300px">
          <template slot-scope="{ row }">{{ row.props }}</template>
        </el-table-column>
        <el-table-column label="备注" min-width="300px">
          <template slot-scope="{ row }">{{ row.cnote }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="400">
          <template slot-scope="{ row }">
            <el-button type="success" icon="el-icon-edit" @click="editRow(row, '后处理')">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delItem(row, '后处理')">删除</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="appendItem(row, '后处理')">追加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <!-- dialog -->
    <!-- 弹窗:新增/修改 -->
    <el-dialog :title="actionType + selectType + '流程'" :visible.sync="showDialog">
      <el-form ref="dataForm" :rules="rules" :model="dialogTmp" label-position="left" label-width="70px" style="width: 400px; margin-left: 50px">
        <el-form-item label="材料:" prop="cproductname">
          <span v-if="actionType == '新增'">
            <span v-if="dialogTmp.cproductcode == ''"><el-button @click="showProduct = true">选择产品</el-button></span>
            <span v-else><i class="el-icon-edit" @click="showProduct = true"></i></span>
          </span>
          <span style="margin-left: 20px">{{ dialogTmp.cproductname }}</span>
        </el-form-item>
        <el-form-item label="单用量:" prop="num_standard">
          <el-input v-model="dialogTmp.num_standard" />
        </el-form-item>
        <el-form-item label="备注:" prop="cnote">
          <el-input v-model="dialogTmp.cnote" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
      <!-- 内嵌套的弹窗,用来选择产品 -->
      <el-dialog width="30%" title="选择产品页面" :visible.sync="showProduct" append-to-body>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-select v-model="productClass" filterable placeholder="请选择">
              <el-option v-for="item in productClassList" :key="item.ccode" :label="item.cname" :value="item.ccode" />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input v-model="filterCode" clearable placeholder="过滤项" />
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="getProductList">查询</el-button>
          </el-col>
        </el-row>
        <!-- 具体产品 -->
        <el-table :data="productList" border height="400" style="width: 100%; margin-top: 20px" @row-click="clickRow">
          <el-table-column label="产品编码" min-width="100px">
            <template slot-scope="{ row }">{{ row.ccode }}</template>
          </el-table-column>
          <el-table-column label="产品名称" min-width="150px">
            <template slot-scope="{ row }">{{ row.cname }}</template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { GetDyeMainMaterial, getProductClassList, getProductList, InsertDyeMain, addDyeMain } from '@/api/dyeing'

export default {
  name: 'Material',
  data() {
    return {
      // 基础信息
      // 条码
      barcode: '',

      // 表头相关
      // finish/eidt,表头具体数据
      headerStatus: 'finish',
      header: {},

      // dialog 弹窗相关
      // 当前操作的流程：前处理/染色/后处理
      selectType: '',
      // 当前操作模式：完成,修改,新增
      actionType: '完成',
      // 用水总量
      waterNum: '',
      // 表头修改状态
      headerEdit: false,

      // 用水总量
      showWater: false,
      // 修改弹窗
      // showEdit: false,
      // 新增弹窗
      showDialog: false,
      // 内层嵌套
      showProduct: false,
      // 弹窗使用的数据
      dialogTmp: {
        addnum: 0,
        cdyetype: '',
        changeuser: '',
        cnote: '',
        colnum: '',
        cproductcode: '',
        cproductname: '',
        cprogress: '',
        creatuser: '',
        dchangedate: null,
        dcreatdate: '',
        nbarcode: '',
        nquantity_product: '',
        nquantity_waster: '',
        num: 0,
        num_standard: 0,
      },
      // 输入框规则
      rules: {
        num_standard: [
          { required: true, message: '用量不能为空', trigger: 'change' },
          { pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' },
        ],
      },
      // 产品分类
      productClassList: [],
      productList: [],
      // 选择的产品分类
      productClass: '',
      // 产品过滤
      filterCode: '',

      dialogTableVisible: false,
      // 3个对应流程表
      beforeData: [],
      afterData: [],
      otherData: [],
    }
  },

  created() {
    // 预加载产品分类
    this.getProductClassList()
  },

  methods: {
    // 通过条码获取对应数据
    GetDyeMainMaterial() {
      if (this.barcode === '') return this.$message('当前条码能为空')
      this.resetDataList()
      GetDyeMainMaterial(this.barcode).then((res) => {
        console.log(res.data)
        // 表头数据
        this.header = res.data.header
        // 代入三个表格的数据
        res.data.detail.forEach((item) => {
          if (item.cprogress == '前处理') this.beforeData.push(item)
          else if (item.cprogress == '后处理') this.afterData.push(item)
          else if (item.cprogress == '染色') this.otherData.push(item)
        })
        // 判断是否有用水量，如果没有用水量，则需要强制输入用水量
        this.headerStatus = parseFloat(this.header.quantity_waster) <= 0 ? 'edit' : 'finish'
        console.log(this.headerStatus)
      })
    },
    // 获得产品分类列表
    getProductClassList() {
      getProductClassList('productclass').then((res) => {
        this.productClassList = res.data
      })
    },
    // 选择产品分类之后查询
    getProductList() {
      if (this.productClass == '') return this.$message('请先选择产品分类再进行查询')
      let data = {
        itemName: '指定分类产品资料',
        ccode: this.productClass,
        filterString: this.filterCode,
      }
      getProductList(data).then((res) => {
        this.productList = res.data
      })
    },

    // 表格内操作
    // 点击选中某一行
    clickRow(row) {
      console.log(row)
      this.dialogTmp.cproductcode = row.ccode
      this.dialogTmp.cproductname = row.cname
      this.showProduct = false
      // 选完产品之后要调用接口
    },

    // dialog 相关
    // 保存/修改新增的流程操作
    submit() {
      // 先调用验证表单的方法，如果验证通过了就可以提交
      this.showDialog = false
      this.actionType = '完成'
      // 还需要调用接口
      const data = {
        QuantityWaster: this.header.quantity_waster ? this.header.quantity_waster : 100,
        Barcode: this.barcode,
        Progress: this.selectType,
        Material: this.dialogTmp.cproductcode,
        NumStandard: this.dialogTmp.num_standard,
        Note: this.dialogTmp.cnote,
      }
      InsertDyeMain(data).then((res) => {
        this.showDialog = false
        this.$message(res.data)
        this.GetDyeMainMaterial()
      })
    },

    // 按钮组操作
    // 点击增加
    showAddItem(type) {
      if (this.headerStatus == 'edit') return this.$message('当前表头处于修改状态，无法添加流程')
      if (parseFloat(this.header.quantity_waster) > 0) {
        this.resetDialogTmp()
        this.selectType = type
        this.showDialog = true
        this.actionType = '新增'
      } else {
        this.$message('请先填写水量')
      }
    },

    // 点就修改/保存表头按钮
    changeHeaderStatus() {
      if (this.headerStatus == 'edit') {
        if (parseFloat(this.header.quantity_waster) <= 0) return this.$message('用水量不能小于0')
        this.headerStatus = 'finish'
        // 提交保存数据
      } else {
        this.headerStatus = 'edit'
      }
    },

    // 逻辑业务
    // 重置三个表格
    resetDataList() {
      this.beforeData = []
      this.afterData = []
      this.otherData = []
    },
    // 重置弹窗内容
    resetDialogTmp() {
      this.dialogTmp = {
        addnum: 0,
        cdyetype: '',
        changeuser: '',
        cnote: '',
        colnum: '',
        cproductcode: '',
        cproductname: '',
        cprogress: '',
        creatuser: '',
        dchangedate: null,
        dcreatdate: '',
        nbarcode: '',
        nquantity_product: '',
        nquantity_waster: '',
        num: 0,
        num_standard: 0,
      }
    },

    // 表格操作
    // 修改
    editRow(row, type) {
      if (this.headerStatus == 'edit') return this.$message('当前表头处于修改状态，无法修改明细')
      this.selectType = type
      this.actionType = '修改'
      this.dialogTmp = row
      this.showDialog = true
    },
    // 删除
    delItem(row, type) {
      if (type == '前处理') {
        // 调用删除接口
      }
    },
    // 追加
    appendItem(row, type) {
      const data = {
        Barcode: this.barcode,
        Material: row.cproductcode,
        Percent: 10,
        AddNum: 10,
        Progress: type,
        QuantityWaster: this.header.quantity_waster,
      }
      addDyeMain(data).then((res) => {
        //this.showDialog = false;
        this.$message(res.data)
        this.GetDyeMainMaterial()
      })
    },

    // 判断输入的用水量
    changeWaterQty(val) {
      const qty = val.replace(/^(\d{15})\d+|((\.\d{6})\d+)$/g, '$1$3')
      this.header.quantity_waster = Math.abs(qty)
    },
  },
}
</script>

<style lang="scss" scoped>
.table-header {
  // height: 100px;
  margin: auto;
  margin: 10px 0;
}

.row-line {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
}

// 文字靠右
.header-label {
  display: flex;
  align-items: center;
  justify-content: right;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
